<template>
    <div>
        <van-nav-bar title="门诊缴费" left-text="" left-arrow @click-left="onClickLeft" />
        <div style="
        padding: 0px 16px;
        height:620px;
        background-color: #f5f5f5;
        overflow-y: auto;
        ">
            <div style="
        width:100%;
        height: 45px;
        background-color: white;
        margin-top: 15px;
        border-radius: 7px;
        line-height: 50px;
        display: flex;
        ">
                <div>
                    <span style="margin-left: 20px;">{{ ii.name }}</span>
                    <span style="margin-left: 20px;">{{ ii.ma }}</span>
                </div>
                <div style="
                display: flex;
                " @click="g4">
                    <img style="
                    width: 20px;
                    height: 20px;
                    margin-left: 120px;
                    margin-top: 15px;
                    " src="https://cdn7.axureshop.com/demo/2208121/images/%E9%97%A8%E8%AF%8A%E7%BC%B4%E8%B4%B9/u1116.svg"
                        alt="">
                    <p style="
                        margin-left: 5px;
                    ">切换</p>
                </div>

            </div>
            <div style="
        width:100%;
        height: 40px;
        background-color: white;
        margin-top: 15px;
        border-radius: 7px;
        line-height: 40px;
        display: flex;
        ">
                <button @click="flagsw" :class="flags == true ? 'activd1d1e' : 'qwe111rg41'">代缴费</button>
                <button @click="flagsw1" :class="flags == false ? 'activ1d1d1e' : 'qwerg41'">已缴费</button>
            </div>
            <div v-if="flags" style="
        width:95%;
        height: 170px;
        background-color: white;
        margin-top: 15px;
        border-radius: 7px;
        line-height: 40px;
        display: flex;
        padding: 7px;
        " v-for="i, index in List" :key="index">
                <div style="
                margin-left: 5px;
                ">
                    <p style="
                      font-weight: 600;
                      height: 18px;
                      border-left: 5px solid #0091ff;
                      line-height: 18px;
                      margin-left: -12px;
                      display: flex;
                      ">
                        <span style="margin-left: 10px;">登记号：{{ i.hao }}</span>
                        <span style="margin-left: 105px;">
                            <!-- 单选框 -->
                            <input type="checkbox" v-model="i.flag">
                        </span>
                    </p>
                    <p style="
                      font-weight: 400;
                      height: 18px;
                      border-left: 5px solid white;
                      line-height: 18px;
                      margin-left: -12px;
                      margin-top: 15px;
                      ">
                        <span style="margin-left: 10px;">就诊科室：{{ i.shi }}</span>
                    </p>
                    <p style="
                      font-weight: 400;
                      height: 18px;
                      border-left: 5px solid white;
                      line-height: 18px;
                      margin-left: -12px;
                      margin-top: 12px;
                      ">
                        <span style="margin-left: 10px;">开单医生：{{ i.sheng }}</span>
                    </p>
                    <p style="
                      font-weight: 400;
                      height: 18px;
                      border-left: 5px solid white;
                      line-height: 18px;
                      margin-left: -12px;
                      margin-top: 12px;
                      ">
                        <span style="margin-left: 10px;">开单时间：{{ i.time }}</span>
                    </p>
                    <p style="
                      font-weight: 400;
                      height: 18px;
                      border-left: 5px solid white;
                      line-height: 18px;
                      margin-left: -12px;
                      margin-top: 12px;
                      display: flex;
                      ">
                        <span style="margin-left: 10px;">开单金额：<span style="color: red;;"><b>￥{{ i.jine
                                    }}</b></span></span>
                        <span style="margin-left: 93px;color:#4793ff;
                        font-size: 14px;
                        " @click="d3">
                            缴费明细 >
                        </span>
                    </p>
                </div>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <div v-if="flags" style="
            height: 73px;
            background-color: white;
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            text-align: center;
            line-height: 50px;
            font-size: 20px;
            display: flex;
            ">
                    <div style="font-size: 14px;margin-left: 10px;">
                        <input type="checkbox" v-model="quan">
                        <span style="margin-left: 5px;">全选 (已选
                            <span style="color: #65a4ff;">{{ count }}</span> 张)
                        </span>
                        <br>
                        <span style="
                        position: absolute;
                        bottom: 0px;
                        left: 27px;
                        ">合计：<span style="color: red;">￥{{ sum }}</span></span>
                    </div>
                    <button style="
                    width: 105px;
                    height: 40px;
                    background-color: #4793ff;
                    border-radius: 10px;
                    margin-left: 60px;
                    color: white;
                    border:0;
                    margin-top: 20px; 
                    margin-left: 130px;
                    font-size: 12px;
                    line-height: 40px;
                    "
                    @click="g34vf"
                    >去缴费</button>

                </div>

            </div>
            <div>
                <p style="
                font-weight: 400;
                font-style: normal;
                font-size: 12px;
                color: #7F7F7F;
                text-align: center;
                margin-top: 20px;
                margin-bottom: 20px;
                ">默认查询近3个月内的缴费订单</p>
            </div>
            <div v-if="!flags" style="
            width:95%;
            height: 230px;
            background-color: white;
            margin-top: 15px;
            border-radius: 7px;
            line-height: 40px;
            display: flex;
            padding: 7px;
            " v-for="i, index in List" :key="index">


                <div style="
                margin-left: 5px;
                ">
                    <p style="
                      font-weight: 600;
                      height: 18px;
                      border-left: 5px solid #0091ff;
                      line-height: 18px;
                      margin-left: -12px;
                      display: flex;
                      ">
                        <span style="margin-left: 10px;">登记号：{{ i.hao }}</span>
                        <span style="margin-left: 80px;" :class="i.flag == true ? 'green' : 'red'">
                            {{ i.flag == true ? '已缴费' : '已退费' }}
                        </span>
                    </p>
                    <p style="
                      font-weight: 400;
                      height: 18px;
                      border-left: 5px solid white;
                      line-height: 18px;
                      margin-left: -12px;
                      margin-top: 15px;
                      ">
                        <span style="margin-left: 10px;">就诊科室：{{ i.shi }}</span>
                    </p>
                    <p style="
                      font-weight: 400;
                      height: 18px;
                      border-left: 5px solid white;
                      line-height: 18px;
                      margin-left: -12px;
                      margin-top: 12px;
                      ">
                        <span style="margin-left: 10px;">开单医生：{{ i.sheng }}</span>
                    </p>
                    <p style="
                      font-weight: 400;
                      height: 18px;
                      border-left: 5px solid white;
                      line-height: 18px;
                      margin-left: -12px;
                      margin-top: 12px;
                      ">
                        <span style="margin-left: 10px;">开单时间：{{ i.time }}</span>
                    </p>
                    <p style="
                      font-weight: 400;
                      height: 18px;
                      border-left: 5px solid white;
                      line-height: 18px;
                      margin-left: -12px;
                      margin-top: 12px;
                      display: flex;
                      ">
                        <span style="margin-left: 10px;">开单金额：<span>￥{{ i.jine
                                }}</span></span>
                    </p>
                    <p style="
                      font-weight: 400;
                      height: 35px;
                      border-left: 5px solid white;
                      line-height: 18px;
                      margin-left: -12px;
                      margin-top: 12px;
                      display: flex;
                      border-bottom: 1px solid #e0e0e0;
                      width: 335px;
                      ">
                        <span style="margin-left: 10px;">订单号：<span>{{ i.hao }}</span></span>
                    </p>
                    <p style="
                    text-align: center;
                    margin-top: 6px;
                    color:#4793ff;
                    font-size: 14px;
                    "
                    @click="asd"
                    >缴费详情 ></p>

                </div>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <div v-if="flags" style="
            height: 73px;
            background-color: white;
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            text-align: center;
            line-height: 50px;
            font-size: 20px;
            display: flex;
            ">
                    <div style="font-size: 14px;margin-left: 10px;">
                        <input type="checkbox">
                        <span style="margin-left: 5px;">全选 (已选
                            <span style="color: #65a4ff;">{{ count }}</span> 张)
                        </span>
                        <br>
                        <span style="
                        position: absolute;
                        bottom: 0px;
                        left: 27px;
                        ">合计：<span style="color: red;">￥{{ sum }}</span></span>
                    </div>
                    <button style="
                    width: 100px;
                    height: 50px;
                    background-color: #4793ff;
                    border-radius: 10px;
                    margin-left: 60px;
                    color: white;
                    border:0;
                    margin-top: 13px; 
                    margin-left: 130px;
                    ">去缴费</button>

                </div>

            </div>

        </div>


    </div>
    <van-popup v-model:show="showBottom" round position="bottom" :style="{ height: '50%' }">
        <div style="
        margin-top: 10px;
                    ">
            <h3 style="
        text-align: center;
        ">选择就诊人</h3>
            <p style="
            margin-top: -22px;
            margin-left: 340px;
            font-size: 20px;
          " @click="showBottom = false">x</p>
            <div style="
        width:90%;
        height: 45px;
        background-color: #e6f4ff;
        margin-top: 15px;
        border-radius: 7px;
        line-height: 50px;
        display: flex;
        margin-left: 20px;
        " v-for="(i, index) in renmen" :key="index" @click="dian(i)">
                <span style="margin-left: 20px;">{{ i.name }}</span>
                <span style="margin-left: 20px;">{{ i.ma }}</span>
            </div>



        </div>

    </van-popup>
    <van-popup v-model:show="showBottom1" round position="bottom" :style="{ height: '60%' }">
        <div style="
        margin-top: 10px;
                    ">
            <h3 style="
        text-align: center;
        ">缴费明细</h3>
            <p style="
            margin-top: -22px;
            margin-left: 340px;
            font-size: 20px;
            margin-bottom: 10px;
          " @click="showBottom1 = false">x</p>
            <div style="
            display: flex;
            justify-content: space-between;
            width: 93.5%;
            height: 50px;
            background-color: white;
            ">
                <div style="
          font-size: 14px;
          display: flex;
          ">
                    <div style="
          margin-left: 20px;
          width: 20px;
          height: 20px;
          text-align: center;
          line-height: 20px;
          background-color: #e6f4ff;
          color:#4694ff;
          font-size: 10px;
          ">药</div><span style="margin-left: 6px;">药品</span>
                </div>
                <div style="
                font-size: 14px;
                ">
                    小计：￥100.13
                </div>
            </div>
            <div style="
            display: flex;
            justify-content: space-between;
            width: 93.5%;
            height: 50px;
            background-color: white;
            color:#7F7F7F;
            margin-top: -12px;
            ">
                <div style="
          font-size: 14px;
          display: flex;
          ">
                    <div style="
          margin-left: 20px;
                  text-align: center;
                  font-size: 14px;
          ">1、葆宫止血颗粒*3盒</div><span style="margin-left: 6px;"></span>
                </div>
                <div style="
                font-size: 14px;
                ">
                    ￥50.13
                </div>
            </div>
            <div style="
            display: flex;
            justify-content: space-between;
            width: 93.5%;
            height: 50px;
            background-color: white;
            color:#7F7F7F;
            margin-top: -20px;
            ">
                <div style="
          font-size: 14px;
          display: flex;
          ">
                    <div style="
          margin-left: 20px;
                  text-align: center;                        
          font-size: 14px;
          ">2、维生素B1*2瓶</div><span style="margin-left: 6px;"></span>
                </div>
                <div style="
                font-size: 14px;
                ">
                    ￥20.00
                </div>
            </div>
            <div style="
            display: flex;
            justify-content: space-between;
            width: 93.5%;
            height: 50px;
            background-color: white;
            color:#7F7F7F;
            margin-top: -20px;
            ">
                <div style="
          font-size: 14px;
          display: flex;
          ">
                    <div style="
          margin-left: 20px;
                  text-align: center;                        
          font-size: 14px;
          ">3、维生素B2*2瓶</div><span style="margin-left: 6px;"></span>
                </div>
                <div style="
                font-size: 14px;
                ">
                    ￥10.00
                </div>
            </div>
            <div style="
            display: flex;
            justify-content: space-between;
            width: 93.5%;
            height: 50px;
            background-color: white;
            color:#7F7F7F;
            margin-top: -20px;
            ">
                <div style="
          font-size: 14px;
          display: flex;
          ">
                    <div style="
          margin-left: 20px;
                  text-align: center;                        
          font-size: 14px;
          ">4、维生素E*2瓶</div><span style="margin-left: 6px;"></span>
                </div>
                <div style="
                font-size: 14px;
                ">
                    ￥10.00
                </div>
            </div>
            <div style="
            display: flex;
            justify-content: space-between;
            width: 93.5%;
            height: 50px;
            background-color: white;
            color:#7F7F7F;
            margin-top: -20px;
            ">
                <div style="
          font-size: 14px;
          display: flex;
          ">
                    <div style="
          margin-left: 20px;
                  text-align: center;                        
          font-size: 14px;
          ">5、维生素C*2瓶</div><span style="margin-left: 6px;"></span>
                </div>
                <div style="
                font-size: 14px;
                ">
                    ￥10.00
                </div>
            </div>
            <div style="
            display: flex;
            justify-content: space-between;
            width: 93.5%;
            height: 50px;
            background-color: white;
            margin-top: -10px;
            ">
                <div style="
          font-size: 14px;
          display: flex;
          ">
                    <div style="
          margin-left: 20px;
          width: 20px;
          height: 20px;
          text-align: center;
          line-height: 20px;
          background-color: #fffbe6;
          color:#faad14;
          font-size: 10px;
          ">查</div><span style="margin-left: 6px;">检查</span>
                </div>
                <div style="
                font-size: 14px;
                ">
                    小计：￥420.00
                </div>
            </div>
            <div style="
            display: flex;
            justify-content: space-between;
            width: 93.5%;
            height: 50px;
            background-color: white;
            color:#7F7F7F;
            margin-top: -20px;
            ">
                <div style="
          font-size: 14px;
          display: flex;
          ">
                    <div style="
          margin-left: 20px;
                  text-align: center;                        
          font-size: 14px;
          ">1、CT</div><span style="margin-left: 6px;"></span>
                </div>
                <div style="
                font-size: 14px;
                ">
                    ￥200.00
                </div>
            </div>
             <div style="
            display: flex;
            justify-content: space-between;
            width: 93.5%;
            height: 35px;
            background-color: white;
            color:#7F7F7F;
            margin-top: -20px;
            border-bottom: 1px solid #E5E5E5;
            ">
                <div style="
          font-size: 14px;
          display: flex;
          ">
                    <div style="
          margin-left: 20px;
                  text-align: center;                        
          font-size: 14px;
          ">2、上腹部CT平扫</div><span style="margin-left: 6px;"></span>
                </div>
                <div style="
                font-size: 14px;
                ">
                    ￥220.00
                </div>
            </div>
            <p style="
            font-size: 16px;
            font-weight: 700;
            font-style: normal;
            color: #000000;
            text-align: right;
            margin-right: 20px;
            margin-top: 10px;
            ">合计：￥520.13</p>
        </div>

    </van-popup>
</template>

<script setup lang="ts">
import { ref, computed,onMounted, reactive, watch } from 'vue'
import axios from 'axios';
let quan=ref(false)

import { useRouter } from 'vue-router'
const router = useRouter()
const onClickLeft = () => {
    router.back()
}
const d3 = () => {
    showBottom1.value = true
}
let flags = ref(true)

const dian = (i: any) => {
    ii.value = i
    showBottom.value = false

}
const renmen = ref([
    {
        name: "王小轲",
        ma: "2015*****10"
    },
    {
        name: "李玲玲",
        ma: "2015*****11"
    },
])
const ii = ref({
    name: "王小轲",
    ma: "2015*****10"
})
let getOutpatientPayment=async()=>{
    let {data:{data}}=await axios.get("http://127.0.0.1:3000/OutpatientPayment")
    List.value= data
}
onMounted(()=>{
    getOutpatientPayment()
})


const showBottom = ref(false)
const showBottom1 = ref(false)

const g4 = () => {
    showBottom.value = true
}
const flagsw = () => {
    flags.value = true
}
const flagsw1 = () => {
    flags.value = false
}
const List = ref([])
const count = computed(() => {
    return List.value.filter((item) => item.flag).length
})
// 统计出来List中flag为true的jine之和
const sum = computed(() => {
    return List.value.filter((item) => item.flag).reduce((prev, item) => prev + item.jine, 0)
})
const asd=()=>{
    router.push("/PaymentOrder")
}
const g34vf=()=>{
    router.push("/confirmPayment")
}

// 使用watch监听quan的值，如果为true，则将List中所有flag的值设置为true，否则设置为false

watch(quan, (newValue, oldValue) => {
    if (newValue) {
        List.value.forEach((item) => {
            item.flag = true
        })
    } else {
        List.value.forEach((item) => {
            item.flag = false
        })
    }
})
// List中所有flag的值都为true的时候，quan的值为true，只要有一个为false，quan的值为false
watch(List, (newValue, oldValue) => { 
    if (newValue.every((item) => item.flag)) {
        quan.value = true
    } else {
        quan.value = false
    }
}, { deep: true })







</script>

<style scoped>
.green {
    background-color: #e6fffb;
    color: #2ac9c8;
    font-size: 12px;
}

.red {
    background-color: #fff1f0;
    color: #ff4d4f;
    font-size: 12px;
}

.activd1d1e {
    width: 50%;
    height: 40px;
    background-color: #1677ff;
    color: white;
    border: 0;
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
}

.activ1d1d1e {
    width: 50%;
    height: 40px;
    background-color: #1677ff;
    color: white;
    border: 0;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
}

.qwe111rg41 {
    width: 50%;
    height: 40px;
    background-color: white;
    color: black;
    border: 0;
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
}

.qwerg41 {
    width: 50%;
    height: 40px;
    background-color: white;
    border: 0;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
    background-color: white;
    color: black;
}
</style>